import VXETable from 'vxe-table'
import createBem from '@Components/assets/js/utils/bem'
import { tableNamespace } from '../../../config'
import './index.scss'

const Bem = createBem(`${tableNamespace}__filter-number`)

VXETable.renderer.add('Number', {
  // 筛选模板
  renderFilter(h, renderOpts, params) {
    const option = params.column.filters[0]

    function handleChangeInput(val) {
      params.$panel.changeOption(null, !!val, option)
    }

    return [
      <div class={Bem()}>
        <div class={Bem('type')}>
          <el-radio-group v-model={option.data.filterType}>
            <el-radio label="eq">等于</el-radio>
            <el-radio label="gt">大于</el-radio>
            <el-radio label="lt">小于</el-radio>
          </el-radio-group>
        </div>
        <div class={Bem('input')}>
          <el-input
            v-model={option.data.value}
            size={this.$store.getters.size}
            placeholder="请输入数值"
            oninput={handleChangeInput}
          />
        </div>
      </div>
    ]
  },
  // 重置数据方法
  filterResetMethod({ options }) {
    options[0].data.value = ''
    options[0].data.filterType = 'eq'
  },
  // 筛选数据方法
  filterMethod({ option, row, column }) {
    let cellValue = row[column.property]
    const { filterType, value } = option.data
    if (!cellValue) return false

    switch (filterType) {
      case 'eq':
        return cellValue == value
      case 'gt':
        return cellValue > value
      case 'lt':
        return cellValue < value
    }
  }
})
